<template>
<div class="container-area border" v-show="chatshow" >
  <div class="el-container-aera-img">
                <img src="../../assets/X.svg" width="20" height="20" @click="chatclick()">
 </div>

  <div id="container" class="border">
    <mt-header
      title="客服"
      style="background:#fff;border-bottom:1px solid #bbb;height:6vh;color:#101010"
    >
      <mt-button
        icon="back"
        slot="left"
        @click="btn1()"
        style="display:inline-block;text-indent:5px;"
      ></mt-button>
    </mt-header>

    <ul class="content border" ref="charView">
     <dir class="head-img">
       <img src="../../assets/yiyuanlogo.svg">
     </dir>
        
         <div class="head-ziti">
        天津市人民医院预约平台为你服务
      </div>

      <li v-for="(item, index) in messageList" :key="index">
           <!-- <div>
        <img src="../../assets/yiyuanlogo.svg">{{nowTime}}
      </div> -->
        <span :class="'span'+(item.myself?'rightimg':'leftimg')"><div>  <img src="../../assets/kefu.svg"  width="20" height="20"></div></span>
        <span :class="'span'+(item.myself?'rightdown':'leftdown')">{{nowTime}}</span>
         <span :class="'span'+(item.myself?'right':'left')">{{item.message}}</span>
      </li>
    </ul>

    <div class="footer">
      <input
      class="input-ziti"
        id="text"
        type="text"
        v-model.trim="inputValue"
        @keyup.enter="chat"
        placeholder="请输入你的咨询..."
        
      >
      <span id="btn" @click="btn2()">发送</span>
    </div>
  </div>
  </div>
</template>

<script>
import $ from "jquery";
var content = $(".content");

export default {
  name: "Kefu",
  data() {
    return {
         chatshow: true,
      //输入的内容,事先约定好的
      inputValue: "",
      //聊天的数组内容
      messageList: []
    };
  }, //点击回车时候发送信息
  methods: {
      chatclick: function() {
      this.chatshow = false;
    },
      timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
      let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate();
      let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
      let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
      // let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
      // return year + "年" + month + "月" + date +"日"+" "+hh+":"+mm ;
      this.nowTime = year + "年" + month + "月" + date +"日"+" "+hh+":"+mm ;
      // console.log(this.nowTime);
    },
// 定时器函数
    nowTimes(){
      this.timeFormate(new Date());
      setInterval(this.nowTimes,30*1000);
    },

    chat() {
      var _this = this;
      //  console.log(_this.$refs.charView);
      this.messageList.push({
        message: this.inputValue,
        //这个是判断当前是否是自己输入的内容,自己的是true,机器人的是false
        myself: true
      });
      // console.log(1);
      // console.log(message)
      // console.log(this.inputValue);
      //每次发送信息之后机器人就要回复,所以添加完之后直接调用机器人的接口
      $.ajax({
        url: "http://www.tuling123.com/openapi/api",
        type: "post",
        data: {
          key: "cef3fe45acf740e1b08f931d839da426",
          info: this.inputValue,
          box: ""
        },
        success: data => {
          // console.log(data);
          this.messageList.push({
            message: data.text,
            myself: false
          });
          _this.$refs.charView.scrollTop += 999;
        }
      });
      this.inputValue = "";
    },
    btn1() {
      this.$router.go(-1);
    },
    btn2() {
      this.messageList.push({
        message: this.inputValue,
        //这个是判断当前是否是自己输入的内容,自己的是true,机器人的是false
        myself: true
      });
      // console.log(1);
      // console.log(message)
      // console.log(this.inputValue);
      //每次发送信息之后机器人就要回复,所以添加完之后直接调用机器人的接口
      $.ajax({
        url: "http://www.tuling123.com/openapi/api",
        type: "post",
        data: {
          key: "cef3fe45acf740e1b08f931d839da426",
          info: this.inputValue
        },
        success: data => {
          // console.log(data);
          this.messageList.push({
            message: data.text,
            myself: false
          });
        }
      });
      this.inputValue = "";
    }
  },
    created() {
    this.nowTimes();
  },
  mounted() {
    this.box = this.$refs.charView;
       this.nowTimes();
  }
};
</script>
<style scoped>
/* * {
            margin: 0;
            padding: 0;
            list-style: none;
            font-family: '微软雅黑'
        } */

.container-area{
  width: 22vw;
  height: 22vw;
  /* margin-left: 75vw; */
  position: relative;
 
}
.el-container-aera-img{
position: absolute;
right: 5px;
top: 10px;
}
#container {
  width: 20vw;
  height: 20vw;
  background: #eee;
  position: absolute;
  box-shadow: 20px 20px 55px #777;
  left:5px;
  top: 25px;
}

.header {
  background: #000;
  height: 40px;
  color: #fff;
  line-height: 34px;
  font-size: 20px;
  padding: 0 10px;
}
.footer {
  width: 20vw;
  height: 40px;
  background: #666;
  position: absolute;
  bottom: 0;
  overflow: hidden;
}
.footer input {
  margin-top: 10px;
  width: 13vw;
  height: 28px;
  outline: none;
  font-size: 12px;
  text-indent: 10px;
  position: absolute;
  border-radius: 6px;
  /* margin-left: 5px; */
  left: 10px;
  top: -6px;
}

.footer span {
  margin-top: 10px;
  display: inline-block;
  width: 5vw;
  height: 30px;
  background: #ccc;
  font-weight: 900;
  line-height: 35px;
  cursor: pointer;
  text-align: center;
  position: absolute;
  right: 10px;
  top: -3px;
  border-radius: 6px;
}
.footer span:hover {
  color: #fff;
  background: #999;
}
#user_face_icon {
  display: inline-block;
  background: red;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  position: absolute;
  bottom: 6px;
  left: 14px;
  cursor: pointer;
  overflow: hidden;
}
img {
  width: 20px;
  height: 20px;
  float: left;
}
.head-img{
  position: absolute;
   left: 10px;
  top: -5px;
}
.content {
  font-size: 20px;
  width: 16vw;
  height: 300px;
  overflow: auto;
  position: absolute;
  left: 10px;
  top: -15px;
}
.content li {
  margin-top: 50px;
  display: block;
  clear: both;
  overflow: hidden;
}
.content li img {
  float: left;
}
.content li span {
  /* background: #7cfc00; */
  padding: 5px;
  border-radius: 10px;
  float: left;
  /* margin: 6px 10px 0 10px; */
  /* max-width: 210px;
  border: 1px solid #ccc;
  box-shadow: 0 0 3px #ccc; */
  /* word-break: break-all; */
  font-size: 10px;
  line-height: 25px;
}

.content li span.spanleft {
  float: left;
  background: #fff;
  line-height: 10px;
  /* position: absolute; */
  /* left: 5px; */
}
.content li span.spanright {
  float: right;
  line-height: 10px;
  background: #7cfc00;
  /* position: absolute;
            right:  5px; */
         
}
.content li span.spanleftimg {
  float: left;
  background: #fff;
 height: 20px;
   width: 20px; 
}
.content li span.spanrightimg {
  float: right;
  background: #7cfc00;
  height: 20px;
   width: 20px;  

}
.content li span.spanleftdown {
  float: left;
  /* background: #fff; */
   /* height: 20px;
   width: 20px;  */
   /* position: absolute; */
 
}
.content li span.spanrightdown {
  float: right;
  /* background: #7cfc00; */
  /* height: 20px;
   width: 20px;   */
}
/* .border {
  border: 1px solid red;
} */
.head-ziti{
    font-size: 12px;
    font-weight: bolder;
    position:absolute;
    top: -50px;
    left: 80px;
}

</style>
